<template>
  <div class="upload-container">
    <div class="flex-row">
      <div
        class="mr-10"
        v-for="(item, index) in urlCalc"
        :key="index"
        style="position: relative"
      >
        <a-image
          v-if="props.type === 1"
          class="img-box"
          :width="80"
          :height="80"
          :src="item"
        />
        <video
          v-if="props.type === 2"
          :src="urlCalc"
          controls
          :width="80"
          :height="80"
        ></video>
        <audio v-if="props.type === 3" :src="urlCalc" controls></audio>
        <div class="close-icon" @click.stop="deleteImage(index)">
          <component is="close-circle-outlined" class="fs-20 c-333"></component>
        </div>
      </div>
      <div
        class="upload-container-main flex-row-xy-center"
        v-global-loading="loading"
      >
        <component class="fs-30 c-333" is="cloud-upload-outlined"></component>
        <input
          :disabled="Number(count) <= urlCalc.length"
          :multiple="count > 1 ? true : false"
          @change="inputChange"
          type="file"
          :accept="accept"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {upload} from "@/api/common";
import {computed, ref} from "vue";
import {message} from "ant-design-vue";

const props = defineProps({
  url: {
    //多个的话 字符串逗号分割 例如'a.png,b.png'
    type: String,
    default: ""
  },
  type: {
    //上传类型 1图片2视频3音频
    type: Number,
    default: 1
  },
  count: {
    //数量限制
    type: Number,
    default: 1
  }
});

const emits = defineEmits(["update:url"]);
const accept = computed(() => {
  if (props.type === 1) {
    //图片
    return "image/*";
  }
  if (props.type === 2) {
    //视频
    return "video/*";
  }
  if (props.type === 3) {
    //音频
    return "audio/*";
  }
});

const urlCalc = computed(() => {
  if (props.url) return props.url.split(",");
  return [];
});

const deleteImage = (index) => {
  urlCalc.value.splice(index, 1);
  emits("update:url", [...urlCalc.value].join(","));
};
const loading = ref(false);
const inputChange = (e) => {
  if (e.target.files.length > Number(props.count)) {
    e.target.value = null;
    message.error(`最多上传${props.count}张`);
    return false;
  }
  let formData = new FormData();
  if (e.target.files.length > 1) {
    for (let i = 0; i < e.target.files.length; i++) {
      let file = e.target.files[i];
      formData.append("files", file);
    }
  } else {
    formData.append("file", e.target.files[0]);
  }
  loading.value = true;
  upload(formData, e.target.files.length)
    .then((res) => {
      if (res.data && res.data instanceof Array) {
        emits(
          "update:url",
          [...urlCalc.value, ...res.data.map((item) => item.url)].join(",")
        );
      } else {
        emits("update:url", [...urlCalc.value, res.data.url].join(","));
      }
      e.target.value = null;
      loading.value = false;
    })
    .catch((err) => {
      e.target.value = null;
      loading.value = false;
    });
};
</script>

<style lang="less" scoped>
.upload-container-main {
  width: 80px;
  height: 80px;
  background-color: #f1f1f1;
  border-radius: 6px;
  position: relative;

  input {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    cursor: pointer;
  }
}

.close-icon {
  position: absolute;
  right: -8px;
  top: -8px;
  cursor: pointer;
}

:deep(.img-box) {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px;
}
</style>
